<template>
  <div>

    <div>

      <div class="file-item" v-for="file in files" @dblclick="downloadFile(file)" >

        <div class="file-item-select">
          <div class="file-item-select-item"><el-checkbox class="file-select" ref="itemCheck" @change="itemChange(this,file.id)" size="medium" label="" name="type"></el-checkbox></div>
          <div class="file-item-select-item" ><el-button type="danger" icon="el-icon-delete" circle @click="removeSafe(file)"></el-button></div>
        </div>

        <div style="height: 100px">
          <svg  class="icon disk-icon" aria-hidden="true">
            <use :xlink:href="'#icon-'+ (file.bucketName == 'blank' ? file.fileSuffix :file.fileSuffix)"  ></use>
          </svg>
        </div>


        <div class="file-msg">
          <div class="file-msg-one" ><div class="file-name">
            {{file.fileName}}


          </div></div>
          <div class="file-createTime" v-text="file.createTime"></div>
        </div>
      </div>

      <el-empty v-if="showEmpty" :description="message"  :image-size="400" image="/img/nothing.png"></el-empty>
      <el-card v-if="showCard" :body-style="bodyStyle" :header="header"  :style="hasPassword?'height:300px':'height: 500px;'" class="box-card">
        <div slot="header" class="box-head">

          <el-avatar :size="50" style=";" src="/img/xiaoyu.jpg"></el-avatar>
          <el-row style="position: absolute;top: 30px;left:80px;">
            <span>{{ title }}</span>
<!--            <el-button style="float: right; padding: 3px 0" @click="this.showCard = false" type="text">关闭</el-button>-->
<!--            <span style="font-weight: normal;font-size: 12px;"><br/>描述：{{share.description}}</span>-->

          </el-row>
        </div>
        <div class="box-input">
          <el-form v-if="!hasPassword" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密保问题1" >
              <el-input v-model="ruleForm.questionA"></el-input>
            </el-form-item>
            <el-form-item label="密保答案1" >
              <el-input v-model="ruleForm.answerA"></el-input>
            </el-form-item>
            <el-form-item label="密保问题2" >
              <el-input v-model="ruleForm.questionB"></el-input>
            </el-form-item>
            <el-form-item label="密保答案2" >
              <el-input v-model="ruleForm.answerB"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

          <div  v-if="hasPassword">
            <span style="font-weight: bold;">请输入保险柜密码：</span>
            <el-row align="center">
              <el-input type="password" style="margin-top: 20px;width: 80%;" v-model="password"></el-input>
              <el-button type="primary"  style="margin-left: 20px"@click="openSafeFile"  >打开</el-button>
            </el-row>
          </div>


        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import {init,saveSafe,allSafeFiles} from '@/api/disk/safe'
import {updateFile} from '@/api/disk/file'
export default {
name: "safe",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      files:[],
      folders:[],
      title:"查看保险柜文件：",
      hasPassword:true,
      path:"",
      password:"",
      header:"background-color: #562;",
      bodyStyle:{
        padding:'0px',
        "background-color": "#fff"
      },
      share:{},
      user:{
        username: '游客用户'
      },
      message:"没有任何文件！",
      showCard:true,
      showEmpty:true,
      activeIndex: '1',
      activeIndex2: '1',
      ruleForm: {
        password: '',
        checkPass: '',
        questionA: '您最难忘的童年好友：',
        questionB: '您最难忘的一天：',
        answerA: '答案1',
        answerB: '答案2',
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.initVue();
  },
  methods: {
    downloadFile(file){
      window.open("http://localhost:9000/"+file.bucketName+"/"+file.filePath);
      this.$notify({
        title: '文件开始下载',
        message: ''+file.fileName,
        type: 'success'
      });

    },
    removeSafe(file){

      this.$confirm('此操作该文件将移动出保险柜, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        file.delFlag = '0';
        updateFile(file).then(re=>{
          if (re.data.code == 0){
            this.$message.success("文件成功移出!");
            this.openSafeFile();
          }
        });
      });

    },
    openSafeFile(){

      if (this.password == null || this.password == '' ){
        this.$message.error("请先输入密码!");
        return ;
      }
      allSafeFiles(Object.assign({
        password: this.password
      })).then(re=>{
        if (re.data.code == 0){
          this.showCard = false;
          this.hasPassword = false;
          this.$message.success(re.data.msg);
          this.files = re.data.data;
          if (this.files != null ){
            this.showEmpty = false;
          }
        }
      })

    },
    initVue(){
      init().then(re=>{
        if (re.data.code == 1){
          this.hasPassword = false;
          this.title = "设置保险柜密码："
        }else {
          this.hasPassword = true;
          this.title='查看保险柜文件：';
        }

      }).catch(()=>{

      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveSafe(this.ruleForm).then(re=>{
            if(re.data.code == 0){
              this.$message.success(re.data.msg);
              this.initVue();
            }
          }).catch(()=>{
            this.$message.error("出错啦!")
          })
        } else {
          this.$message.error("验证不通过!")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.box-head{
  color: #fff;
  font-weight: bolder;
  font-size: 18px;
  /*background-color: #0fe8cf;*/
}
.box-input{
  background-color: #fff;
  height: 100%;
  padding:20px;
  margin-top: 20px;
}
.box-card {
  border-radius: 20px;
  width: 600px;
  position:fixed;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  height:300px;
  /*background-color: #409EFF;*/
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .12), 10px 10px 12px rgba(0, 0, 0, .04)
}
.el-card /deep/ .el-card__header {
  background-color: #409EFF;
}



.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.disk-icon{
//background-color: #19be6b;
  height: 120px!important;
  width: 100px!important;
}
.file-item{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  float: left;
  width: 150px;
  margin: 10px;
//background-color: #ed3f14;
  height: 180px;
  border-radius: 10px;

}
.file-item:hover{
  opacity: 0.9;
  background-color: #c8c9cb;
}
.file-item-select-item{
  width: 20px;
  display: none;
}
.file-item:hover .file-item-select-item{
  display: block;
}
.file-select:checked{
  display: block;
}
.file-item-select{
//height: 30px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-self: flex-start;
}
.file-msg{
  font-weight: bold;
  margin-top: 20px;
  width: 100%;
  height: 50px;
//background-color: #2d8cf0;
}
.file-name{

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
//font-size: 20px;
}
.file-createTime{

  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}
</style>
